<template>
	<view class="index">

		<cu-custom-header bgColor="bg-topic-theme" :isBack="true" class="custom">
			<block slot="backText" class="text-sm location">车主端</block>
		</cu-custom-header>
		<!-- 最底层下拉刷新辅助的view -->
		<view class="refresh"></view>
		<view class="container">
			<view class="my-background-circle bg-topic-theme"></view>
			<!-- 轮播-begin -->
			<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#F8D347">
				
			</swiper>
      <text >--lunbo----lunbo----lunbo----lunbo----lunbo----lunbo----lunbo--</text>
			<!-- 轮播-end -->
			<view class="recommend">
        <view class="recom">
          <view class="text">
            <text>货源推荐</text>
            <hr style="background-color: #777; height: 5rpx; border-radius: 3rpx;">
          </view>
          <view class="icopic">
            <image src="../../static/hr_ico.png" mode=""></image>
          </view>
          
          
        </view>
			  <view v-for="i in 5" class="content">
			    <div class="row">
			      <truckerbox Tname="货源A" Tinfo="这个货那个货,反正很多货拉,巴拉巴拉巴拉拉巴拉巴拉巴拉巴拉"></truckerbox>
			    </div>
			
			  </view>
			
			</view>
      <view class="other" style="padding: 15rpx; padding-top: 20rpx;">
        <view style=" width: 250rpx; height: 60rpx; ">
          <text style="font-size: 60rpx; color: #000;">其他货源</text>
        <hr style="background-color: #777; height: 5rpx; border-radius: 3rpx;">
        </view>
        <view v-for="i in 10" class="content">
        <div class="row">
          <truckerbox Tname="货源B" Tinfo="这个货那个货,反正很多货拉,巴拉巴拉巴拉拉巴拉巴拉巴拉巴拉"></truckerbox>
        </div>
      			
      </view>
      </view>
      

		</view>

	</view>
</template>

<script>
  
</script>

<style lang="scss" scoped>
  .recom{
    display: flex;
    background: lightseagreen;
    .text{
      width: 250rpx;
      height: 60rpx;
      text{
        font-size: 60rpx;
        color: #000;
      }
    }
    .icopic{
      width: 60rpx;
      height: 80rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .recommend{
    border: 2px solid lightseagreen;
    border-radius: 20rpx;
    border-bottom: 7rpx solid lightseagreen;
  }
  
	.index {
		min-height: 100vh;
		overflow-x: hidden;

		.refresh {
			position: fixed;
			z-index: -1;
			background-color: #F8D347;
			width: 100vw;
			height: 50vh;
			top: 0;
			left: 0;
		}

		.container {
			position: relative;
			background-color: #FFFFFF;

			.my-background-circle {
				position: absolute;
				width: 100%;
				height: 200rpx;
				/* #ifdef APP-PLUS */
				height: 240rpx;
				/* #endif */
				height: 280rpx;
				border-radius: 0 0 50% 50% / 0% 0% 15% 15%;
				overflow: hidden;
			}
		}
	}

  .content{
    padding: 25rpx;
    border-bottom: 1px solid #aaffff;
    .row{
      
      padding:5rpx 0;
    }
  }
</style>
